<template>
  <div class="addinfo">
    <form v-for="(item,index) in thead" :key="index">
      <label>{{item.inputName}}</label>
      <el-input placeholder="请输入内容" v-model="info.input" clearable></el-input>
      <label>{{item.ageName}}</label>
      <el-input placeholder="请输入内容" v-model="info.age" clearable></el-input>
      <label>{{item.sexName}}</label>
      <el-input placeholder="请输入内容" v-model="info.sex" clearable></el-input>
      <label>{{item.phoneName}}</label>
      <el-input placeholder="请输入内容" v-model="info.phone" clearable></el-input>
      <label>{{item.wordIdName}}</label>
      <el-input placeholder="请输入内容" v-model="info.wordId" clearable></el-input>
      <label>{{item.moneyName}}</label>
      <el-input placeholder="请输入内容" v-model="info.money" clearable></el-input>
      <el-button @click="commit" :plain="true">信息提交</el-button>
    </form>
    <table v-for="(item,index) in thead" :key="index+'1'">
      <thead>
        <tr>
          <th>{{item.inputName}}</th>
          <th>{{item.ageName}}</th>
          <th>{{item.sexName}}</th>
          <th>{{item.phoneName}}</th>
          <th>{{item.wordIdName}}</th>
          <th>{{item.moneyName}}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{info.input}}</td>
          <td>{{info.age}}</td>
          <td>{{info.sex}}</td>
          <td>{{info.phone}}</td>
          <td>{{info.wordId}}</td>
          <td>{{info.money}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      info: {
        input: "",
        age: "",
        sex: "",
        phone: "",
        wordId: "",
        money: ""
      },
      thead: [
        {
          inputName: "姓名",
          ageName: "年龄",
          sexName: "性别",
          phoneName: "手机号",
          wordIdName: "工号",
          moneyName: "薪资"
        }
      ]
    };
  },
  methods: {
    commit() {
      axios.post("peopleInfo.json", this.info);
      this.$message({
        message: "信息录入成功！",
        type: "success"
      });
      this.$router.push("/details/2");
    }
  }
};
</script>
<style lang="less" scoped>
.addinfo {
  position: relative;
  left: 10%;
  width: 300px;
  padding-top: 10px;
}
table,
thead,
tr,
th,
td {
  border: 1px solid #ffbbff;
  padding: 20px;
}
table {
  position: absolute;
  top: 0;
  left: 100%;
}
</style>